<template>
  <div class="NewDiscBox">
    <div class="prevBox" @click="$refs.carouselDom.prev()"></div>
    <el-carousel
      indicator-position="none"
      height="184px"
      :autoplay="false"
      arrow="never"
      ref="carouselDom"
    >
      <el-carousel-item
        v-for="(childList, index) in DewDiseList"
        class="itemBox"
        :key="index"
      >
        <div
          v-for="item in childList"
          class="itemcontent"
          @click="NewDiscItemClick"
          :key="item.id"
        >
          <div class="imgBox">
            <img :src="item.picUrl" class="itemImg" alt="" />
            <div class="playBtn" @click.stop="showPlayBtn"></div>
          </div>
          <p class="itemName">{{ item.name }}</p>
          <p class="singer">{{ item.artist.name }}</p>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="nextBox" @click="$refs.carouselDom.next()"></div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {};
  },
  props: {
    DewDiseList: { type: Array, default: [] },
  },
  created() {},
  methods: {
    NewDiscItemClick() {
      this.$emit("NewDiscItemClick", { id: 2 });
    },
    showPlayBtn() {
      this.$emit("ItemPlay", { id: 3 });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  margin: 0;
}

// .el-carousel__item:nth-child(2n) {
// background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n + 1) {
// background-color: #d3dce6;
// }
.itemcontent {
  width: 118px;
  height: 150px;
}
.itemBox {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.itemImg {
  width: 100px;
  height: 100px;
}
.imgBox {
  width: 118px;
  height: 100px;
  position: relative;
  background-position: 0 -570px;
  background: url("./../../assets/imges/background.png") no-repeat 0 -570px;
  &:hover {
    .playBtn {
      display: block;
    }
  }
}
.playBtn {
  width: 22px;
  height: 22px;
  background: url("./../../assets/imges/btnIcon.png") no-repeat 0 -85px;
  position: absolute;
  right: 26px;
  bottom: 7px;
  display: none;
}
.itemName {
  color: #000;
  cursor: pointer;
  font-size: 12px;
  padding: 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.singer {
  color: #666;
  cursor: pointer;
  font-size: 12px;
  padding: 3px 0;
}
.NewDiscBox {
  background: #f5f5f5;
  border: 1px solid #fff;
  border: 1px solid #d3d3d3;
  margin: 20px 0 37px;
  padding: 0 30px;
  position: relative;
}
.prevBox {
  width: 17px;
  height: 17px;
  position: absolute;
  top: 71px;
  left: 7px;
  background: url("./../../assets/imges/PopularRecommendationIcon.png")
    no-repeat -280px -75px;
}
.nextBox {
  width: 17px;
  height: 17px;
  top: 71px;
  right: 7px;
  position: absolute;
  background: url("./../../assets/imges/PopularRecommendationIcon.png")
    no-repeat -300px -75px;
}
</style>